<script lang="tsx" setup>
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn } from '@/components/Table'
import { reactive, ref } from 'vue'
import { useTable } from '@/hooks/web/useTable'
import { FormSchema } from '@/components/Form'
import dialogFeedForm from './components/dialog-feed-form.vue'
import { ElMessage } from 'element-plus'
import * as FeedApi from '@/api/official-website/unit/feed'

const { t } = useI18n()

const schema = reactive<FormSchema[]>([
  {
    field: 'feedShowType',
    label: '是否对齐',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '对齐',
          value: 1
        },
        {
          label: '不规则',
          value: 2
        }
      ]
    }
  },
  {
    field: 'feedType',
    label: '信息流类型',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '图文',
          value: 1
        },
        {
          label: '视频',
          value: 2
        }
      ]
    }
  }
])

const columns: TableColumn[] = [
  {
    field: 'feedTitle',
    label: '信息流标题'
  },
  {
    field: 'feedType',
    label: '信息流类型',
    formatter: (row) => {
      return <div>{row.feedType === 1 ? '图文' : '视频'}</div>
    }
  },
  {
    field: 'Url',
    label: '信息流封面',
    formatter: (row) => {
      return (
        <div>
          <el-image src={row.feedType === 1 ? row?.imageUrls[0] : row?.videoCoverUrl}></el-image>
        </div>
      )
    }
  },
  {
    field: 'feedContent',
    label: '信息流内容',
    formatter: (row) => {
      // 当多出两行时隐藏
      return <el-text line-clamp="2">{row.feedContent}</el-text>
    }
  },
  {
    field: 'sortNo',
    label: '排序'
  },
  {
    field: 'feedShowType',
    label: '是否对齐',
    formatter: (row) => {
      return (
        <el-button size="small" type="success" plain>
          {row.switchJump === 1 ? '对齐' : '不规则'}
        </el-button>
      )
    }
  },
  {
    field: 'action',
    label: '操作',
    formatter: (row: any) => {
      return (
        <div>
          <el-button type="primary" link onClick={() => openForm('update', row.id)}>
            编辑
          </el-button>
          <el-button type="danger" link onClick={() => deleteFeed(row.id)}>
            删除
          </el-button>
        </div>
      )
    }
  }
]

/** 表格相关方法 */
const {
  register: tableRegister,
  tableObject,
  tableMethods,
  elTableRef
} = useTable({
  getListApi: async (option: any) => {
    const { pageSize, pageNo, ...params } = option

    const newParams = Object.entries(params).reduce((prev, [key, value]) => {
      value && (prev[key] = value)
      return prev
    }, {})

    // 调用接口获取直播列表
    const res = await FeedApi.getPageFeed({ pageSize, pageNo, ...newParams })

    // 排序
    const data = res.list.sort((prev, next) => prev.sortNo - next.sortNo)
    return {
      list: data,
      total: res.total
    }
  }
})

const { getList, setSearchParams } = tableMethods
getList()

/** 添加/修改操作 */
const formRef = ref<any>()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

// 删除信息流
const deleteFeed = (id: string) => {
  ElMessageBox.confirm('是否删除该数据?')
    .then(() => {
      FeedApi.deleteFeed(id).then((res) => {
        if (res) {
          ElMessage({
            message: '删除成功',
            type: 'success'
          })
          getList()
        }
      })
    })
    .catch(() => {
      // catch error
    })
}
</script>

<template>
  <ContentWrap>
    <Search :schema="schema" @search="setSearchParams">
      <template #actionMore
        ><el-button type="primary" plain @click="openForm('create')">创建信息流</el-button>
      </template>
    </Search>
  </ContentWrap>
  <ContentWrap>
    <Table
      :columns="columns"
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
      :data="tableObject.tableList"
      :pagination="{
        total: tableObject.total
      }"
      @register="tableRegister"
    />
  </ContentWrap>

  <dialogFeedForm ref="formRef" @success="getList" />
</template>
